<template>
  <div class="fenleijieguo">
    <!-- 价格把戏筛选 -->
    <div class="shaixuan2">
      <ul class="ul1">
        <li
          @click="paixuxiala = !paixuxiala"
          :class="[paixuxiala ? 'active' : '']"
        >
          {{ paixutext }}
        </li>
        <li @click="xiaoliang, (ok = 1)" :class="ok == 1 ? 'active' : ''">
          销量
        </li>
        <li @click="shitu = !shitu">视图</li>
      </ul>
    </div>
    <transition-group name="chai1">
      <ul class="ul2" v-show="paixuxiala" @click="paixuxiala = false" key="1">
        <transition-group name="chai2">
          <li
            @click="paixu('moren'), (jiageindex = 0), (paixutext = '默认排序')"
            key="2"
            v-show="paixuxiala"
            :class="[jiageindex == 0 ? 'active' : '']"
          >
            默认排序
          </li>
          <li
            @click="paixu('shen'), (jiageindex = 1), (paixutext = '价格升序')"
            key="3"
            v-show="paixuxiala"
            :class="[jiageindex == 1 ? 'active' : '']"
          >
            价格升序
          </li>
          <li
            @click="paixu('jiang'), (jiageindex = 2), (paixutext = '价格降序')"
            key="4"
            v-show="paixuxiala"
            :class="[jiageindex == 2 ? 'active' : '']"
          >
            价格降序
          </li>
        </transition-group>
      </ul>
    </transition-group>
    <!-- 商品 -->
    <div class="shangping">
      <ul :class="[shitu ? 'shitu1' : 'shitu2']">
        <li v-for="item in list" :key="item.proid" @click="jinru(item.proid)">
          <dl>
            <dt>
              <img :src="item.img1" alt="" />
            </dt>
            <dd>
              <h5>
                {{ item.proname }}
              </h5>
              <!-- <p>{{ item.category }}</p> -->
              <h4>¥{{ item.originprice }}</h4>
              <div>
                <span>销售数量:{{ item.sales }}</span>
                <span class="miaosha" v-show="item.isseckill">秒杀</span>
              </div>
            </dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      paixuxiala: false,
      list: null,
      list2: null,
      shitu: true,
      jiageindex: 0,
      paixutext: "默认排序",
      ok: 0,
    };
  },
  mounted() {
    this.$emit("fanhui", 4);
    this.gitlist();
  },
  methods: {
    //价格排序
    paixu(val) {
      this.list2 = [...this.list];
      this.paixuxiala = false;
      if (val == "shen") {
        this.list.sort((a, b) => {
          return a.originprice - b.originprice;
        });
      }
      if (val == "jiang") {
        this.list.sort((a, b) => {
          return b.originprice - a.originprice;
        });
      }
      if (val == "moren") {
        this.list = this.list2;
      }
    },
    //销量排序
    xiaoliang() {
      this.list2 = [...this.list];
      this.list.sort((a, b) => {
        return b.sales - a.sales;
      });
    },
    //视图
    gaibianshitu() {},
    //获取
    gitlist() {
      axios
        .get(
          `http://121.89.205.189:3000/api/pro/categorybrandprolist?category=${this.$route.query.category}&brand=${this.$route.query.brand}`
        )
        .then((res) => {
          this.list = res.data.data;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.fenleijieguo {
  width: 100%;
  height: 100%;
}
.shaixuan2 {
  width: 100%;
  margin-bottom: 10px;
  background: white;
  height: 40px;
  position: relative;
  > .ul1 {
    height: 100%;
    display: flex;
    // flex-direction: column;
    justify-content: space-between;
    align-items: center;
    > li {
      position: relative;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 0.2rem;
      font-weight: 600;
    }
  }
}
.ul2 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0.3rem;
  background: rgba(100, 100, 100, 0.7);
  margin-top: 55px;
  li {
    padding: 0 0.1rem;
    font-weight: 600;
    height: 0.44rem;
    border-bottom: 1px solid rgba(204, 204, 204, 0.698);
    line-height: 0.44rem;
    background: white;
  }
}
.shangping {
  display: flex;

  .shitu1 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    > li {
      width: 50%;
      padding: 0.08rem;
      box-sizing: border-box;

      > dl {
        width: 100%;
        height: 100%;
        background: white;
        border-radius: 0.05rem;
        overflow: hidden;
        > dt {
          width: 100%;
          height: 1.7rem;
        }
        > dd {
          padding: 0.08rem;
          > h5 {
            height: 0.3rem;
            overflow: hidden;
          }
          > h4 {
            color: red;
          }
          > div {
            display: flex;
            color: #999999;
            font-size: 0.08rem;
            :nth-child(2) {
              padding: 0 0.01rem;
              margin-left: 0.02rem;
              color: red;
              border: 0.005rem solid red;
            }
          }
        }
      }
    }
  }
  .shitu2 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    > li {
      width: 100%;
      height: 1.5rem;
      padding: 0.08rem;
      box-sizing: border-box;

      > dl {
        width: 100%;
        height: 100%;
        background: white;
        border-radius: 0.05rem;
        overflow: hidden;
        display: flex;
        > dt {
          width: 1.35rem;
          height: 100%;
          > img {
            width: 1.35rem;
          }
        }
        > dd {
          padding: 0.08rem;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          > h5 {
            height: 0.6rem;
            overflow: hidden;
            font-size: 0.13rem;
          }
          > h4 {
            color: red;
            font-size: 0.22rem;
          }
          > div {
            display: flex;
            color: #999999;
            font-size: 0.08rem;
            :nth-child(2) {
              padding: 0 0.01rem;
              margin-left: 0.02rem;
              color: red;
              border: 0.005rem solid red;
            }
          }
        }
      }
    }
  }
}
.active {
  color: rgb(255, 105, 49);
}
/* 进入的起点/离开的终点 */
.chai1-enter,
.chai1-leave-to {
  // transform: translateX(-100%);
  opacity: 0;
}
/* 进入和离开的动画 */
.chai1-enter-active,
.chai1-leave-active {
  transition: 0.2s;
}
/* 进入的终点/离开的起点 */
.chai1-enter-to,
.chai1-leave {
  // transform: translateX(0%);
  opacity: 1;
}

.chai2-enter,
.chai2-leave-to {
  transform: translateY(-100%);
}
/* 进入和离开的动画 */
.chai2-enter-active,
.chai2-leave-active {
  transition: 0.2s;
}
/* 进入的终点/离开的起点 */
.chai2-enter-to,
.chai2-leave {
  transform: translateY(0%);
}
</style>